<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=8" />
        <link rel="stylesheet" href="../css/cssreset.css">
        <link rel="stylesheet" href="../css/index.css">
    </head>
    <body>
    	<section>
    		<p class="pss"><img src="../images/customer.png" alt="" width="100%"></p>
    		<div class="denglu">
    			<form action="../login/index.action" method="post"  onsubmit="return tet()">
    				<div class="user">
	    				<span class="imgs"><img src="../images/account.png" alt=""></span>
	    				<span class="bord"></span>
						<input type="text" name="staff_userName" placeholder="用户名" class="use" id="user">
    				</div>
    				<p class="spa"><span id="spa">请输入用户名</span></p>
    				<div class="pass">
	    				<span class="imgs"><img src="../images/password.png" alt=""></span>
	    				<span class="bord"></span>
						<input type="password" name="staff_password" placeholder="密码" class="use" id="pass">
    				</div>
    				<p class="spb"><span id="spb">请输入密码</span></p>
    				<div class="yan">
    					验证码&nbsp;:<input type="text"  id="idcode" class="txt" onblur="validate()"><input type="button" class="but" id="checkCode">
    				</div>
    				<p class="spc"><span id="spc">请输入验证码或正确的验证码</span></p>
    				<input type="submit" class="sub" value="登录">
    			</form>
    		</div>
    	</section>
    </body>
    <script>
	  var code ;
      var check=document.getElementById('checkCode');
      check.onclick=function(){
        code = new Array();
      var codeLength = 4;
      check.value = "";
      var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
      for(var i=0;i<codeLength;i++) {
         var charIndex = Math.floor(Math.random()*32);
         code +=selectChar[charIndex];
      }
      check.value = code;
      }
      window.onload=function createCode(){ 
      code = new Array();
      var codeLength = 4;
      check.value = "";
      var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
      for(var i=0;i<codeLength;i++) {
         var charIndex = Math.floor(Math.random()*32);
         code +=selectChar[charIndex];
      }
      check.value = code;
      }
      function validate () {
      var inputCode = document.getElementById("idcode").value.toUpperCase();
      if(inputCode != code ){ 
          document.getElementById('spc').style.display='inline';
               return false; }
      else {
         document.getElementById('spc').style.display='none';
        return true;}
      }
      var user=document.getElementById('user');
      var pass=document.getElementById('pass');
      var idcode=document.getElementById('idcode');
      function tet(){
        var val=true;
        var pattern= /\s/;
        var users=user.value;
        if(users==''||pattern.test(users)){
            document.getElementById('spa').style.display='inline';
            val=val&&false;
        }else{
            document.getElementById('spa').style.display='none';
        }



        var pas=pass.value;
        if(pas==''||pattern.test(users)){
            document.getElementById('spb').style.display='inline';
            val=val&&false;
        }else{
            document.getElementById('spb').style.display='none';
        }
        var idco=idcode.value.toUpperCase();
        if(idco==''||idco!=code||pattern.test(idco)){
        	document.getElementById('spc').style.display='inline';
        	val=val&&false;
        }else{
        	document.getElementById('spc').style.display='none';
        }
        return  val;
      }
      user.onblur=function(){
    	  var pattern= /\s/;
        var txt=user.value;
        if(txt==''||pattern.test(txt)){
            document.getElementById('spa').style.display='inline';
        }else{
            document.getElementById('spa').style.display='none';
        }
      }
      pass.onblur=function(){
    	var pattern= /\s/;
        var pas=pass.value;
        if(pas==''||pattern.test(pas)){
            document.getElementById('spb').style.display='inline';
        }else{
            document.getElementById('spb').style.display='none';
        }
      }    	
    </script>
</html>